// import { RouterConfigLoader } from '@angular/router/src/router_config_loader';
// import { Route } from '@angular/router';
import {Component,OnInit} from '@angular/core';
import {Http,Response} from '@angular/http';
import {FormBuilder,FormGroup,Validators,AbstractControl,FormControl} from "@angular/forms";
import {Developer} from './user'
function skuValidator(control: FormControl): { [s: string]: boolean } {
  if (!control.value.match(/^123/)) {
    return {invalidSku: true};
  }
}
@Component({
  selector: 'home',
  templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit{
   dataUrl='./app/data.json';
  data=[];
  myForm:FormGroup;

  // myGroup:FormGroup;
 favourite:AbstractControl;
 work:AbstractControl;
 productName:string;
 sex:string;
 technologie:string='';
developer = new Developer();
  technologies: string[] = [
    'JavaScript',
    'C',
    'C#',
    'Clojure'
  ];
//  products:any[]=[
//    {value:'shose',display:'鞋'},
//    {value:'coat',display:'外套'},
//    {value:'pants',display:'裤子'},
//    {value:'cap',display:'帽子'}
//  ];

  constructor(private http:Http,fb:FormBuilder){
    this.myForm=fb.group({
      'favourite':['', Validators.compose([ Validators.required, skuValidator])],
       
      // 'favourite':['qqqqqqq']
      'work':['student'],
     'productName': ['', Validators.required],
      'sex': ['femail'],
      'technologies':['JavaScript']
    
      
    });
    this.favourite = this.myForm.controls['favourite']
    this.work = this.myForm.controls['work'];
    

   // this.sex = this.myForm.controls['sex'];
    //  this.myForm = new FormGroup({
    //    firstName: new FormControl()
    // });
  }

  ngOnInit():void{
    this.http.get(this.dataUrl).subscribe((res:Response)=>{
    this.data=res.json()
    this.sex= 'femail';
    // this.products;
  })
}
 
 tan(id:number){
   alert(id);console.log(id)
 }
 onSubmit(form:any): void{
   console.log(form)
 }
 onSubmitBuilder(value:string):void{
  console.log(value)
 }
 
}
